<template>
  <div>
    <Loading></Loading>
    <!-- banner -->
    <div class="home-banner" :style="cover">
      <div class="bgShade">
        <div class="banner-container">
          <!-- 网站名称 -->
          <h1 class="blog-title animated zoomIn">
            {{ blogInfo.webSite.name }}
          </h1>
          <p></p>
          <!--     点击更换一言 图标  句子输出完成前，按钮不可点击   -->
          <button class="el-icon-lollipop" :disabled="typerFlag" style="font-size: 2rem"
                  @click="changeHitokoto"></button>
          <p></p>
          <p></p>
          <!-- 一言 -->
          <div class="blog-intro">
            {{ obj.output }} <span class="typed-cursor">|</span>
            <!--          {{ blogInfo.webSite.summary }} <span class="typed-cursor">|</span>-->
          </div>
          <!-- 联系方式 -->
          <div class="blog-contact">
            <a
              v-if="isShowSocial(2)"
              class="mr-5 iconfont iconqq"
              target="_blank"
              :href="
              'http://wpa.qq.com/msgrd?v=3&uin=' +
                blogInfo.webSite.qqNumber +
                '&site=qq&menu=yes'
            "
            />
            <a
              v-if="isShowSocial(3)"
              target="_blank"
              :href="blogInfo.webSite.github"
              class="mr-5 iconfont icongithub"
            />
            <a
              v-if="isShowSocial(4)"
              target="_blank"
              :href="blogInfo.webSite.gitee"
              class="iconfont icongitee-fill-round"
            />
          </div>
        </div>
        <!-- 向下滚动 -->
        <div class="scroll-down" @click="scrollDown">
          <v-icon color="#fff" class="scroll-down-effects">
            mdi-chevron-down
          </v-icon>
        </div>
      </div>
    </div>

    <!-- 主页文章 -->
    <v-row class="home-container">
      <v-col md="12" cols="12" style="padding: 0 7.5px !important;">
        <!-- 笔记分类 -->
        <div class="book">
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane class="categoryItem" v-for="(item, index) in categoryBookList" :name="index + ''" :key="index">
                      <span slot="label">
                          <i :class="item.icon"></i>
                          {{ item.name }}
                      </span>
            </el-tab-pane>
          </el-tabs>
        </div>
      </v-col>
      <v-col md="9" cols="12">
        <v-card>
          <div style="display: flex;margin-top: 0;padding: 1rem 1rem;" class="bulletin">
            <v-icon style="color: red">mdi-bell-outline</v-icon>
            <span style="margin-left: 10px">{{ blogInfo.webSite.bulletin }}</span>
          </div>
        </v-card>
        <div v-if="articleList.length > 0">
          <v-card
            class="animated zoomIn article-card"
            style="border-radius: 5px"
            v-for="(item, index) of articleList"
            :key="item.id"
          >
            <!-- 文章封面图 -->
            <div class="article-cover right-radius">
              <router-link :to="'/articles/' + item.id">
                <v-img
                  class="on-hover"
                  width="100%"
                  height="100%"
                  :src="item.avatar"
                />
              </router-link>
            </div>
            <!-- 文章信息 -->
            <div class="article-wrapper">
              <div style="line-height:1.4">
                <div>
                  <router-link :to="'/articles/' + item.id">
                    {{ item.title }}
                  </router-link>
                  <span v-if="item.quantity >= 1000 && item.quantity < 10000"
                        style="font-size:12px;border-radius:3px;border: 1px solid  #f70;text-align: center"><font
                    style="color: #f70;">千次阅读</font></span>
                  <span v-if="item.quantity >= 10000"
                        style="font-size:12px;border-radius:3px;border: 1px solid  #f70;text-align: center"><font
                    style="color: #f70;">万次阅读</font></span>
                </div>
              </div>
              <div class="article-info">
                <!-- 是否置顶 -->
                <span v-if="item.isStick === 1">
                <span style="color:#ff7242">
                  <i class="iconfont iconzhiding" /> 置顶
                </span>
                <span class="separator">|</span>
              </span>
                <!-- 发表时间 -->
                <v-icon size="14">mdi-calendar-month-outline</v-icon>
                {{ item.createTime | date }}
                <span class="separator">|</span>
                <!-- 文章分类 -->
                <router-link :to="'/categories/' + item.categoryId">
                  <v-icon size="14">mdi-inbox-full</v-icon>
                  {{ item.categoryName }}
                </router-link>
                <span class="separator">|</span>
                <!-- 文章标签 -->
                <router-link
                  style="display:inline-block"
                  :to="'/tags/' + tag.id"
                  class="mr-1"
                  v-for="tag of item.tagDTOList"
                  :key="tag.id"
                >
                  <v-icon size="14">mdi-tag-multiple</v-icon>
                  {{ tag.name }}
                </router-link>
              </div>
              <!-- 文章内容 -->
              <div class="article-content">
                {{ item.summary }}
              </div>
            </div>
          </v-card>
          <!-- 无限加载 -->
          <!--          <infinite-loading @infinite="infiniteHandler">-->
          <!--            <div slot="no-more" />-->
          <!--          </infinite-loading>-->
          <!-- 加载更改文章按钮 -->
          <div @click="onPage" class="page">
            <Pagination :pageNo="params.pageNo" :pages="pages" />
          </div>
        </div>
        <el-empty style=" width: 100%;" v-else description="很抱歉，暂无文章"></el-empty>
      </v-col>
      <!-- 博主信息 -->
      <v-col md="3" cols="q" class="d-md-block d-none">
        <div class="blog-wrapper">
          <v-card class="animated zoomIn blog-card mt-5">
            <div class="author-wrapper">
              <!-- 博主头像 -->
              <v-avatar size="110">
                <img
                  class="author-avatar"
                  :src="blogInfo.webSite.authorAvatar"
                />
              </v-avatar>
              <div style="font-size: 1.375rem">
                {{ blogInfo.webSite.author }}
              </div>
              <div style="font-size: 0.875rem;">
                {{ blogInfo.webSite.authorInfo }}
              </div>
            </div>
            <!-- 博客信息 -->
            <div class="blog-info-wrapper">
              <div class="blog-info-data">
                <router-link to="/archives">
                  <div style="font-size: 0.875rem;color: #1c1c1c">文章</div>
                  <div style="font-size: 1.25rem">
                    {{ blogInfo.count.articleCount }}
                  </div>
                </router-link>
              </div>
              <div class="blog-info-data">
                <router-link to="/categories">
                  <div style="font-size: 0.875rem;color: #1c1c1c">分类</div>
                  <div style="font-size: 1.25rem">
                    {{ blogInfo.count.categoryCount }}
                  </div>
                </router-link>
              </div>
              <div class="blog-info-data">
                <router-link to="/tags">
                  <div style="font-size: 0.875rem;color: #1c1c1c">标签</div>
                  <div style="font-size: 1.25rem"> {{ blogInfo.count.tagCount }}</div>
                </router-link>
              </div>
            </div>
            <!-- 收藏按钮 -->
            <a class="collection-btn" @click="tip = true">
              <v-icon color="#fff" size="18" class="mr-1">mdi-bookmark</v-icon>
              加入书签
            </a>
            <!-- 社交信息 -->
            <!--            <div class="card-info-social">
                          <a
                            v-if="isShowSocial('qq')"
                            class="mr-5 iconfont iconqq"
                            target="_blank"
                            :href="
                              'http://wpa.qq.com/msgrd?v=3&uin=' +
                                blogInfo.webSite.qqNumber+
                                '&site=qq&menu=yes'
                            "
                          />
                          <a
                            v-if="isShowSocial('github')"
                            target="_blank"
                            :href="blogInfo.webSite.github"
                            class="mr-5 iconfont icongithub"
                          />
                          <a
                            v-if="isShowSocial('gitee')"
                            target="_blank"
                            :href="blogInfo.webSite.gitee"
                            class="iconfont icongitee-fill-round"
                          />
                        </div>-->
          </v-card>
          <!-- 网站信息 -->
          <v-card class="blog-card animated zoomIn mt-5 big">
            <div class="web-info-title">
              <v-icon size="18">mdi-account</v-icon>
              关注我
            </div>
            <div class="guanzhu" id="follow-us" ref="follow">
              <!--              {{blogInfo.webSite.bulletin}}-->
              <ul>
                <!--                <li class="qqGroup">
                                  <a href="javascript:void(0);">{{ blogInfo.webSite.qqNumber}}</a>
                                </li>-->
                <li v-if="isShowSocial(2)" class="qq"><a
                  :href="'tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=' +  blogInfo.webSite.qqNumber"
                  target="_blank">{{ blogInfo.webSite.qqNumber }}</a></li>
                <li v-if="isShowSocial(1)" class="email"><a href="javascript:void(0);">{{ blogInfo.webSite.email }}</a>
                </li>
                <li v-if="isShowSocial(3)" class="github"><a :href="blogInfo.webSite.github"
                                                             target="_blank">{{ blogInfo.webSite.github }}</a></li>
                <li v-if="isShowSocial(4)" class="gitee"><a :href="blogInfo.webSite.gitee"
                                                            target="_blank">{{ blogInfo.webSite.gitee }}</a></li>
                <!-- <li class="wx"><img src="../../../static/images/wx.jpg"></li> -->
              </ul>
            </div>
          </v-card>
          <!--    和风天气      -->
          <!--          <v-card class="blog-card animated zoomIn mt-5">
                      <div id="he-plugin-standard"></div>
                    </v-card>-->
          <!-- 网站信息 -->
          <v-card class="blog-card animated zoomIn mt-5 tag_container">
            <!--            <div class="web-info-title">
                          标签云
                        </div>
                        <div class="web-info">
                          <svg :height="height" :width="width" style="text-align: center;" @mousemove="listener($event)">
                            <router-link
                              v-for="(tag,index) in tags"
                              :key="tag.text.id"
                              :to="'/tags/' + tag.text.id"
                            >
                              <text :x="tag.x" :y="tag.y" :font-size="20 * (600/(600-tag.z))" :fill-opacity="((400+tag.z)/600)"
                                    :fill="colors[index]">{{ tag.text.name }}
                              </text>
                            </router-link>
                          </svg>
                        </div>-->
            <div class="clearfix">
              <svg t="1693669114247" class="icon" viewBox="0 0 1024 1024"
                   xmlns="http://www.w3.org/2000/svg" p-id="15154" width="18" height="18">
                <path
                  d="M533 1024l-147.7-84.8-136.4 78.3h-11.3c-17.3 0-34.2-3.4-50.1-10.1-15.3-6.5-29.1-15.7-40.8-27.6-11.7-11.7-21-25.5-27.5-40.8-6.7-15.9-10.1-32.7-10.1-50.1V128.5c0-17.4 3.4-34.2 10.1-50.1 6.5-15.3 15.8-29.1 27.6-40.8 11.7-11.8 25.5-21 40.8-27.5C203.3 3.4 220.2 0 237.5 0h590.9c17.3 0 34.2 3.4 50.1 10.1 15.3 6.5 29.1 15.7 40.8 27.6 11.7 11.7 21 25.5 27.5 40.8 6.7 15.9 10.1 32.7 10.1 50.1V889c0 17.4-3.4 34.2-10.1 50.1-6.5 15.3-15.8 29.1-27.6 40.8-11.7 11.8-25.5 21-40.8 27.5-15.8 6.7-32.7 10.1-50 10.1h-11.3l-136.4-78.3L533 1024z m147.7-182.6l157.2 90.3c2.5-0.6 5-1.4 7.5-2.4 5.2-2.2 9.9-5.4 13.9-9.4 4.1-4.1 7.2-8.7 9.4-14 2.3-5.3 3.4-11.1 3.4-17V128.5c0-5.9-1.1-11.7-3.4-17-2.2-5.2-5.4-9.9-9.4-13.9-4.1-4.1-8.7-7.2-13.9-9.4-5.4-2.3-11.1-3.4-17-3.4H237.5c-5.9 0-11.6 1.1-17 3.4-5.2 2.2-9.9 5.4-13.9 9.4-4.1 4.1-7.2 8.7-9.4 14-2.3 5.3-3.4 11.1-3.4 17V889c0 5.9 1.1 11.7 3.4 17 2.2 5.2 5.4 9.9 9.4 13.9 4.1 4.1 8.7 7.2 13.9 9.4 2.4 1 4.9 1.8 7.5 2.4l157.2-90.3L533 926.2l147.7-84.8z"
                  fill="#3688FF" p-id="15155"></path>
                <path
                  d="M490.6 310.9H321c-23.4 0-42.4-19-42.4-42.4s19-42.4 42.4-42.4h169.6c23.4 0 42.4 19 42.4 42.4s-19 42.4-42.4 42.4z m211.9 176.7H321c-23.4 0-42.4-19-42.4-42.4s19-42.4 42.4-42.4h381.6c23.4 0 42.4 19 42.4 42.4-0.1 23.4-19 42.4-42.5 42.4z"
                  fill="#5F6379" p-id="15156"></path>
              </svg>
              <span class="tags_wall"> 标签墙 </span>
              <a href="/tags" class="more">更多</a>
            </div>
            <div class="tag">
                <span @click="handleTagClike(item.id)" :style="{ backgroundColor: item.color }"
                      class="item" v-for="(item, index) in tags" :key="index">
                    {{ item.name }}
                </span>
            </div>
          </v-card>
          <!-- 网站信息 -->
          <v-card class="blog-card animated zoomIn mt-5">
            <div class="web-info-title">
              <v-icon size="18">mdi-chart-line</v-icon>
              网站资讯
            </div>
            <div class="web-info">
              <div style="padding:4px 0 0">
                运行时间:<span class="float-right">{{ time }}</span>
              </div>
              <div style="padding:4px 0 0">
                总访问量:<span class="float-right">
                  {{ blogInfo.count.viewsCount }}
                </span>
              </div>
              <div style="padding:4px 0 0">
                当前在线人数:<span class="float-right">{{ onlineCount }}</span>
              </div>
            </div>
          </v-card>
        </div>
      </v-col>
    </v-row>
    <!-- 提示消息 -->
    <v-snackbar v-model="tip" top color="#49b1f5" :timeout="2000">
      按CTRL+D 键将本页加入书签
    </v-snackbar>
  </div>
</template>

<script>
  import EasyTyper from "easy-typer-js";
  import { fetchList, addFeedback, getTags, featchCategoryBook } from "../../api";
  import Pagination from "@/components/pagination/index.vue";
  import Loading from "@/components/loading/loading";

  export default {
    components: {
      Pagination,
      Loading
    },
    created() {
      this.init();
      this.timer = setInterval(this.runTime, 1000);
      // 初始化文章列表
      this.onPage();
      this.fetchcategoryBookList();
      //初始化标签
      this.getTagWall();
    },
    destroyed() {
      // 销毁监听
      this.socket.onclose = this.close;
    },
    beforeDestroy() {
      clearInterval(this.heartBeat);
    },
    mounted: function() {
      window.WIDGET = {
        "CONFIG": {
          "layout": "2",
          "width": 230,
          "height": 300,
          "background": "2",
          "dataColor": "000000",
          "borderRadius": "5",
          "key": "8ff116ca55274b06a71b3784cfda4a3b"
        }
      };
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
      document.getElementsByTagName("head")[0].appendChild(script);
    },
    metaInfo: {
      meta: [{
        name: "keyWords",
        content: "儒林小栈,开源博客,www.codescholar.cn"  //变量或字符串
      }, {
        name: "description",
        content: "一个专注于技术分享的博客平台,大家以共同学习,乐于分享,拥抱开源的价值观进行学习交流"
      }]
    },
    data: function() {
      return {
        tags: [],
        path: process.env.VUE_APP_WEBSOCKET_API,
        socket: "",
        onlineCount: 0,
        heartBeat: null,
        formLabelWidth: "80px",
        typerFlag: true,  // 更换一言句子的按钮，句子没有显示完成时，不可点击
        form: {
          type: 1,
          email: null,
          title: null,
          content: null,
          imgUrl: null
        },
        webSite: {},
        tip: false,
        totalPage: null,
        img: process.env.VUE_APP_IMG_API,
        time: "",
        obj: {
          output: "",
          isEnd: false,
          speed: 300,
          singleBack: false,
          sleep: 0,
          type: "rollback",
          backSpeed: 40,
          sentencePause: true
        },
        articleList: [],
        params: {
          pageNo: 0,
          pageSize: 7
        },
        pages: 0,
        activeName: "0",
        categoryBookList: [
          {
            id: null,
            name: "最新",
            icon: "el-icon-news",
            desc: ""
          }
        ],
        rules: {
          type: [
            { required: true, message: "必填字段", trigger: "blur" }
          ],
          email: [
            { required: true, message: "必填字段", trigger: "blur" },
            { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/, message: "填写正确的邮箱" }
          ],
          title: [
            { required: true, message: "必填字段", trigger: "blur" }
          ]
        }
      };
    },

    methods: {
      screenshot() {
        this.$toast({ type: "error", message: "敬请期待!" });
      },
      closeDialog() {
        this.form.type = 1;
        this.form.email = null;
        this.form.title = null;
        this.form.content = null;
        this.$store.commit("setDialogFormVisible");
      },
      submit() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            addFeedback(this.form).then(res => {
              this.$toast({ type: "success", message: "提交反馈成功" });
              this.closeDialog();
            }).catch(err => {
              this.$toast({ type: "error", message: "提交反馈失败" });
            });
          } else {
            this.$toast({ type: "error", message: "存在必填字段未填" });
          }
        });
      },
      // 初始化
      init() {
        document.title = "儒林小栈";
        if (typeof (WebSocket) === "undefined") {
          console.error("您的浏览器不支持socket");
        } else {
          // 实例化socket
          this.socket = new WebSocket(this.path);
          // 监听socket连接
          this.socket.onopen = this.open;
          // 监听socket错误信息
          this.socket.onerror = this.error;
          // 监听socket消息
          this.socket.onmessage = this.getMessage;
        }
        this.changeHitokoto();
      },
      // 一言Api进行打字机循环输出效果  by  程序儒  2023年4月11日
      initTyped(input, fn, hooks) {
        const obj = this.obj;
        const typed = new EasyTyper(obj, input, () => {
          // 回调函数  文字输出完成，将更换按钮设置为可用状态
          this.typerFlag = false;
        }, (output) => {
          // 钩子函数 output { 当前帧的输出内容 }
          // 文字正在输出，将更换按钮设置为不可点击状态
          this.typerFlag = true;
        });
      },
      changeHitokoto() {
        // 加载一言名句 a 动画，b 漫画，c 游戏，d 文学，e 原创，f 来自网络，g 其他，h 影视，i 诗词，j 网易云，k 哲学，l 抖机灵
        fetch("https://v1.hitokoto.cn?c=i&c=j&c=k&c=d&c=l")
          .then(res => {
            return res.json();
          })
          .then(({ hitokoto }) => {
            this.initTyped(hitokoto);
          });
      },
      scrollDown() {
        window.scrollTo({
          behavior: "smooth",
          top: document.documentElement.clientHeight
        });
      },
      runTime() {
        var timeold =
          new Date().getTime() -
          new Date(1601600888000).getTime();
        var msPerDay = 24 * 60 * 60 * 1000;
        var msYear = msPerDay * 365;
        var yearsold = Math.floor(timeold / msYear);
        // var daysold = Math.floor(timeold / msPerDay);
        var daysold = Math.floor((timeold - yearsold * msYear) / msPerDay);
        var str = "";
        var day = new Date();
        str += yearsold + "年";
        str += daysold + "天";
        str += day.getHours() + "时";
        str += day.getMinutes() + "分";
        str += day.getSeconds() + "秒";
        this.time = str;
      },
      onPage() {
        // let md = require("markdown-it")();
        this.params.pageNo++;
        fetchList(this.params).then(res => {
          // 去除markdown标签
          // res.data.records.forEach(item => {
          //   if (item.contentMd != null) {
          //     item.content = md
          //       .render(item.contentMd)
          //       .replace(/<\/?[^>]*>/g, "")
          //       .replace(/[|]*\n/, "")
          //       .replace(/&npsp;/gi, "");
          //   }
          //   this.articleList.push(item);
          // });
          this.articleList.push(...res.data.records);
          this.pages = res.data.pages;
        });
      },
      getTagWall() {
        getTags().then(res => {
          this.tags = res.data.sort(() => 0.5 - Math.random()).slice(0, 16);
          for (let i = 0; i < this.tags.length; i++) {
            this.$set(this.tags[i], "color", this.randomColor());
          }
        });
      },
      handleTagClike(id) {
        this.$router.push({ path: "/tags/"+id})
      },
      fetchcategoryBookList() {
        featchCategoryBook().then(res => {
          this.categoryBookList.push(...res.data);
        });
      },
      randomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        do {
          for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
          }
        } while (color === '#FFFFFF' || color === '#000000');
        return color;
      },
      handleTabClick(tab) {
        this.articleList = [];
        let item = this.categoryBookList[tab.index];
        this.params.pageNo = 0;
        this.params.categoryId = item.id;
        this.params.orderByDescColumn = item.desc;
        this.onPage();
      },
      open: function() {
        // 发送心跳消息
        var that = this;
        that.heartBeat = setInterval(function() {
          that.send("ping");
        }, 30 * 1000);
      },
      error: function() {
        console.error("连接错误");
      },
      getMessage: function(event) {
        this.onlineCount = event.data;
      },
      send(message) {
        this.socket.send(message);
      },
      close: function() {
        console.log("socket已经关闭");
      }
    },
    computed: {
      blogInfo() {
        return this.$store.state.blogInfo;
      },
      isShowSocial() {
        return function(social) {
          return this.$store.state.blogInfo.webSite.showList.indexOf(social) !== -1;
        };
      },
      cover() {
        var cover = "";
        this.$store.state.blogInfo.pageList.forEach(item => {
          if (item.pageLabel === "home") {
            cover = item.pageCover;
          }
        });
        return "background: url(" + cover + ") center center / cover no-repeat";
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-tabs__item {
    font-size: 20px;
    font-weight: 500;
  }

  ::v-deep .el-tabs__item:hover {
    cursor: url(https://fastly.jsdelivr.net/gh/peiguozhi/BLOG_SOURCE/img/pointer.cur), pointer;
  }

  ::v-deep .el-tabs {
    width: 100%;
  }

  ::v-deep .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
  }

  .tag_container {

    .clearfix {
      font-size: 15px;

      .tags_wall {
        margin-left: 8px;
      }

      .icon {
        float: left;
        margin-top: 6px;
      }

      .more {
        float: right;
        margin-right: 10px;
        text-decoration: none;
      }
    }

    .tag {
      height: auto;
      margin-top: 10px;
      line-height: 1.2;

      span {
        font-size: 16px;
        text-decoration: none;
        margin-left: 13px;
        padding: 5px;
        display: inline-block;
        margin-bottom: 10px;
        border-radius: 6px;
        color: #fff;
        transition: all .3s;

        &:hover {
          border-radius: 0;
        }
      }
    }

  }

</style>

<style lang="stylus">
  .typed-cursor
    opacity: 1
    animation: blink 0.7s infinite

  @keyframes blink
    0%
      opacity: 1
    50%
      opacity: 0
    100%
      opacity: 1
</style>

<style scoped>
    .page {
        margin-top: 2rem;
    }

    /*  调整首图背景不透明度  by 程序儒  2023年4月11日  */
    .bgShade {
        background-color: rgba(0, 0, 0, 0.15);
    }

    .home-banner {
        position: absolute;
        top: -60px;
        left: 0;
        right: 0;
        height: 100vh;
        background-attachment: fixed;
        text-align: center;
        color: #fff !important;
        animation: header-effect 1s;
    }

    .banner-container {
        margin-top: 43vh;
        line-height: 1.5;
        color: #eee;
    }

    .blog-contact a {
        color: #fff !important;
    }

    .card-info-social {
        line-height: 40px;
        text-align: center;
        margin: 6px 0 -6px;
    }

    .card-info-social a {
        font-size: 1.5rem;
    }

    .left-radius {
        border-radius: 8px 0 0 8px !important;
        order: 0;
    }

    .right-radius {
        border-radius: 5px 5px 5px 5px !important;
        order: 1;
    }

    .article-wrapper {
        font-size: 14px;
    }

    @media (min-width: 760px) {
        .blog-title {
            font-size: 3rem;
            font-family: 'STXingkai', 'pgz', serif !important;
            margin-bottom: 1rem;
            color: #eee;
        }

        .blog-intro {
            font-size: 1.5rem;
            font-family: 'STXingkai', 'pgz', serif !important;
            margin: 1rem auto;
            cursor: text;
        }

        .blog-contact {
            display: none;
        }

        .home-container {
            max-width: 75%;
            margin: calc(100vh - 48px) auto 28px auto;
            padding: 0 5px;
        }

        .article-card {
            display: flex;
            align-items: center;
            height: 200px;
            width: 100%;
            margin-top: 15px;
        }

        .article-cover {
            position: absolute;
            top: 22px;
            right: 15px;
            overflow: hidden;
            height: 75%;
            width: 25%;
        }

        .on-hover {
            transition: all 0.6s;
        }

        .article-card:hover .on-hover {
            transform: scale(1.1);
        }

        .article-wrapper {
            padding: 0 2rem;
            width: 70%;
        }

        .article-wrapper a {
            font-size: 1.5rem;
            transition: all 0.3s;
        }
    }

    @media (max-width: 759px) {
        .banner-container {
            margin-top: 30vh;
            line-height: 1.5;
            color: #eee;
        }

        .blog-title {
            font-size: 3rem;
            font-family: 'STXingkai', 'pgz', serif !important;
            margin-bottom: 1rem;
            color: #eee;
        }

        .blog-intro {
            font-size: 1.5rem;
            font-family: 'STXingkai', 'pgz', serif !important;
            max-width: 80%;
            margin: 1rem auto;
            cursor: text;
        }

        .blog-contact {
            font-size: 1.7rem;
            line-height: 2;
        }

        .home-container {
            width: 100%;
            margin: calc(100vh - 66px) auto 0 auto;
        }

        .article-card {
            margin-top: 1rem;
        }

        .article-cover {
            border-radius: 8px 8px 0 0 !important;
            height: 230px !important;
            width: 100%;
        }

        .article-cover div {
            border-radius: 8px 8px 0 0 !important;
        }

        .article-wrapper {
            padding: 1.25rem 1.25rem 1.875rem;
        }

        .article-wrapper a {
            font-size: 1.25rem;
            transition: all 0.3s;
        }
    }

    .scroll-down {
        cursor: pointer;
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .scroll-down i {
        font-size: 2rem;
    }

    .article-wrapper a:hover {
        color: rgba(73, 177, 245, 0.8);
    }

    .article-info {
        font-size: 95%;
        color: #858585;
        line-height: 2;
        margin: 0.375rem 0;
    }

    .article-info a {
        font-size: 95%;
        color: #858585 !important;
    }

    .article-content {
        line-height: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        cursor: text;
    }

    .blog-wrapper {
        position: sticky;
        top: 10px;
    }

    .blog-card {
        margin-bottom: 15px;
        margin-top: 0 !important;
        line-height: 2;
        padding: 1.25rem 0.6rem;
    }

    .author-wrapper {
        text-align: center;
    }

    .blog-info-wrapper {
        display: flex;
        justify-self: center;
        padding: 0.875rem 0;
    }

    .blog-info-data {
        flex: 1;
        text-align: center;
    }

    .blog-info-data a {
        text-decoration: none;
    }

    .collection-btn {
        text-align: center;
        z-index: 1;
        font-size: 14px;
        position: relative;
        display: block;
        background-color: #49b1f5;
        color: #fff !important;
        height: 32px;
        line-height: 32px;
        transition-duration: 1s;
        transition-property: color;
    }

    .collection-btn:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: #ff7242;
        content: "";
        transition-timing-function: ease-out;
        transition-duration: 0.5s;
        transition-property: transform;
        transform: scaleX(0);
        transform-origin: 0 50%;
    }

    .collection-btn:hover:before {
        transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
        transform: scaleX(1);
    }

    .author-avatar {
        transition: all 0.5s;
    }

    .author-avatar:hover {
        transform: rotate(360deg);
    }

    .web-info {
        padding: 0.25rem;
        font-size: 0.875rem;
    }

    .scroll-down-effects {
        color: #eee !important;
        text-align: center;
        text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
        line-height: 1.5;
        display: inline-block;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        animation: scroll-down-effect 1.5s infinite;
    }

    @keyframes scroll-down-effect {
        0% {
            top: 0;
            opacity: 0.4;
            filter: alpha(opacity=40);
        }
        50% {
            top: -16px;
            opacity: 1;
            filter: none;
        }
        100% {
            top: 0;
            opacity: 0.4;
            filter: alpha(opacity=40);
        }
    }

    .big i {
        color: #f00;
        animation: big 0.8s linear infinite;
    }

    @keyframes big {
        0%,
        100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.2);
        }
    }

    .guanzhu {
        margin-top: 10px;
    }

    .guanzhu .qqGroup {
        background: url() no-repeat;
        background-size: 22px;
        background-position-y: 47%;
    }

    .guanzhu .qq {
        background: url() no-repeat 0 -98px;
    }

    .guanzhu .email {
        background: url() no-repeat 0 -150px;
    }

    .guanzhu .github {
        background: url(github-fill.png) no-repeat;
        background-size: 25px;
        background-position-y: 47%;
    }

    .guanzhu .gitee {
        background: url() no-repeat;
        background-size: 25px;
        background-position-y: 47%;
    }

    .guanzhu ul li {
        font-size: 12px;
        margin-bottom: 10px;
        background: #fff;
        color: #525252;
        line-height: 40px;
        padding: 0 0 0 34px;
        border: 1px solid #ddd;
        border-radius: 2px;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

</style>
